<!-- 科技成果 -->
<template>
	<div class="box">
		<div class="title_box">
			<div class="title_box_left">
				<img src="@/assets/home/title-icon.png" alt="">
				<p>科技成果</p>
			</div>
			<div>
				<el-tabs v-model="dataList.activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="成果推介" name="first"></el-tab-pane>
					<el-tab-pane label="转化公示" name="second"></el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<div class="popularize_box">
			<popularize :type="'list'" :tabType='1' :list="dataList.popularize1" @lookDetale="lookDetales"
				v-if="dataList.islist &&dataList.activeName == 'first'"></popularize>
			<popularize :type="'list'" :tabType='2' :list="dataList.popularize2" v-if="dataList.islist &&dataList.activeName == 'second'" 
				@lookDetale="lookDetales"></popularize>
			<div v-if="!dataList.islist" class="popDetail">
				<p>{{dataList.detailList.projectName}}</p>
				<li class="popDetail_time">
					<span>{{dataList.detailList.createdTime.slice(0,10)}}</span>
					<span @click="fanhui">返回</span>
				</li>
				<img class="popDetail_img" :src="dataList.detailList.photoUrl?dataList.detailList.photoUrl[0]:''" alt="">
				<span class="popDetail_msg">
					{{dataList.detailList.achievementProfile}}
				</span>
				<!-- <div class="popDetail_btn">
					<div>
						<span>上一篇：</span>
						<span>豫农604</span>
					</div>
					<div>
						<span>下一篇：</span>
						<span>豫农604</span>
					</div>
				</div> -->
			</div>
		</div>
		<!-- <div class="paging">
			<el-pagination :pager-count="5" background layout="prev, pager, next" :total="dataList.total"
				:current-page="dataList.page" @current-change="changesize" />
		</div> -->
	</div>
</template>

<script setup lang="ts">
	import { searchAchievement ,getAchievementByUuid } from '../../api/home.js'
	import popularize from '../../components/popularize.vue';
	import titleBox from '../../components/titleBox.vue';
	import { reactive, onBeforeMount ,onMounted} from 'vue';
	import type { TabsPaneContext } from 'element-plus'
	import { useRouter } from 'vue-router'
	const dataList = reactive({
		total: 10,
		page: 1,
		activeName: 'first',
		islist: true,
		popularize1: '',
		popularize2: '',
		detailList:''
	})
	
	const router = useRouter()
	onMounted(() => {
		// router.currentRoute.value.query.id
		if(router.currentRoute.value.query.status){
			dataList.activeName = router.currentRoute.value.query.status
			fanhui(router.currentRoute.value.query.id)
		}else{
			dataList.islist = true
			dataList.activeName = 'first'
		}
		getsearchAchievement('cgtj')
		getsearchAchievement('zhgs')
		
	})
	const changesize = (value) => {
		dataList.page = value
	}
	const handleClick = (tab : TabsPaneContext) => {
		// console.log(tab.paneName)
		// console.log(data.activeName)
		dataList.islist = true
		// console.log(dataList.activeName)
	}
	const lookDetales = (id) => {
		fanhui(id)
	}
	const fanhui = (id) => {
		var data = {
			params: id
		}
		getAchievementByUuid(data).then(res=> {
			dataList.detailList = res.data
			dataList.islist = !dataList.islist
		})
	}

	const getsearchAchievement = (type) => {
		console.log(type,"6666666666")
		var data = {
			page: { pageNum: 1 },
			params: { category: type, projectName: "" }
		}
		searchAchievement(data).then(res=> {
			if (type == 'zhgs') {
				dataList.popularize2 = res.data.list
			} else {
				dataList.popularize1 = res.data.list
			}
		})

	}
</script>

<style scoped lang="scss">
	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_left {
			display: flex;
			align-items: center;

			img {
				width: 55px;
			}

			p {
				font-size: 34px;
				font-weight: 600;
				color: #11918E;
				margin-left: 10px;
			}
		}
	}

	.box {
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;
		min-height: 430px;
		.popularize_box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}

	.popDetail {
		width: 1140px;
		display: flex;
		flex-direction: column;
		align-items: center;

		&_time {
			display: flex;
			align-items: center;
			margin: 10px 0 30px 0;

			span {
				font-size: 14px;
				font-weight: 400;

			}

			span:last-child {
				color: #11918E;
				margin-left: 30px;
				cursor: pointer;
			}
		}

		&_img {
			width: 500px;
			// height: 223px;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
		}

		&_msg {
			display: block;
			margin: 30px 0;
			width: 800px;
			font-size: 16px;
			font-weight: 400;
			color: #333333;
		}

		&_btn {
			width: 100%;
			display: flex;
			cursor: pointer;
			justify-content: space-between;
			padding-top: 30px;
			border-top: 1px solid rgba(17, 145, 142, 0.1);

			div {
				span {
					font-size: 16px;
					font-weight: 400;
					color: #333333;
					margin-right: 10px;
				}

				span:last-child {
					color: #11918E;
				}
			}
		}
	}

	/* 分页 */
	.paging {
		width: 100%;
		margin-top: 30px;
		display: flex;
		justify-content: center;

		:deep(.is-active) {
			background-color: #11918E !important;
		}
	}

	:deep(.is-active) {
		color: #11918E!important;
	}

	:deep(.el-tabs__item):hover {
		color: #11918E;
	}

	:deep(.el-tabs__active-bar) {
		background-color: #11918E!important;
	}
</style>